<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器</title>
    <script src="../js/vue.js"></script>
    <script src="../js/dayjs.min.js"></script>
  </head>
  <body>
    <!--  
        过滤器:
            定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
            语法:
                1.注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}}
                2.使用过滤器:{{xxx|过滤器名}}或 v-bind:属性 =“xxx|过滤器名"
            备注:
                1.过滤器也可以接收额外参数、多个过滤器也可以串联
                2.并没有改变原本的数据,是产生新的对应的数据

    -->

    <div id="root">
      <h2>显示格式化后的时间</h2>
      <!-- 计算属性实现 -->
      <h3>现在是:{{fmtTime}}</h3>
      <!-- methods实现 -->
      <h3>现在是:{{getFmtTime()}}</h3>
      <!-- 过滤器实现 -->
      <h3>现在是:{{time | timeformater}}</h3>
      <!-- 过滤器传参 -->
      <h3>现在是:{{time | timeformater('YYYY_MM_DD')}}</h3>
      <h3>现在是:{{time | timeformater('YYYY_MM_DD') | mySlice}}</h3>
      <h3 :x="msg | mySlice">尚硅谷</h3>
    </div>

    <div id="root2">
      <h2>{{msg}}</h2>
      <h2>{{msg | mySlice}}</h2>
    </div>

    <script>
      Vue.config.productionTip = false;

      //全局的过滤器
      Vue.filter("mySlice", function (value) {
        return value.slice(0, 4);
      });

      new Vue({
        el: "#root",
        data: {
          time: 1646469695208, //时间戳
          msg: "你好，尚硅谷",
        },
        computed: {
          fmtTime() {
            return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
          },
        },
        methods: {
          getFmtTime() {
            return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
          },
        },
        //局部的过滤器
        filters: {
          timeformater(value, str = "YYYY-MM-DD HH:mm:ss") {
            // console.log("@", value);
            return dayjs(value).format(str);
          },
          mySlice(value) {
            return value.slice(0, 4);
          },
        },
      });

      new Vue({
        el: "#root2",
        data: {
          msg: "hello atguigu!",
        },
      });
    </script>
  </body>
</html>
